<div class="admin mt-2.5">
  <button
    *ngIf="!isSelfDevelop"
    nz-button
    nzType="primary"
    (click)="handleSync()"
    [nzLoading]="syncLoading"
  >
    {{ $t('_save') }}
  </button>
  <button
    *ngIf="!isSelfDevelop"
    nz-button
    style="margin: 0 15px 20px 15px"
    (click)="handleRestoreData()"
  >
    {{ $t('_resetInitData') }}
  </button>
  <button nz-button (click)="handleDownloadBackup()">
    {{ $t('_backup') }}
  </button>

  <button
    class="!ml-2.5"
    nz-button
    nz-tooltip
    nzTooltipPlacement="bottom"
    [nzTooltipTitle]="$t('_importBackupTip')"
  >
    {{ $t('_importBackup') }}
    <input
      type="file"
      name="file2"
      (change)="handleUploadBackup($event)"
      accept=".json"
      class="file-upload"
    />
  </button>

  <div class="tip2">
    {{ $t('_errCountTip', { count: settings.errorUrlCount || 0 }) }}
  </div>

  <nz-tabset
    *ngIf="isLogin"
    [nzSelectedIndex]="tabActive"
    (nzSelectedIndexChange)="onTabChange($event)"
  >
    <nz-tab [nzTitle]="$t('_mgr1')">
      <button nz-button nzType="primary" (click)="openCreateClass()">
        {{ $t('_addTag') }}
      </button>
      <button
        (click)="onBatchDelete()"
        nz-button
        nzDanger
        style="margin-left: 10px"
        [disabled]="setOfCheckedId.size <= 0"
      >
        {{ $t('_batchDel') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="navs()"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              class="min-w-[100px]"
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onCheckAll($event)"
            >
              ({{ setOfCheckedId.size }})
            </th>
            <th class="min-w-[200px]">{{ $t('_action') }}</th>
            <th class="min-w-[100px]">{{ $t('_icon') }}</th>
            <th class="min-w-[200px]">{{ $t('_tagName') }}</th>
            <th class="min-w-[100px]">{{ $t('_onlyOwnVisible') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of navs(); let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.id)"
              (nzCheckedChange)="onItemChecked(data.id, $event)"
            ></td>
            <td class="select-none">
              <a (click)="moveOneUp(idx)" [class.invisible]="idx === 0">{{
                $t('_moveUp')
              }}</a>
              <a (click)="moveOneDown(idx)" class="ml-2.5">{{
                $t('_moveDown')
              }}</a>
              <a (click)="openEditClass(data)" class="ml-2.5">{{
                $t('_edit')
              }}</a>
            </td>
            <td>
              <app-logo [src]="data.icon" [name]="data.title" />
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgr2')">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        class="w-full !mb-2.5 md:w-[260px] md:!mb-0"
      >
        <nz-option
          *ngFor="let item of navs()"
          [nzLabel]="item.title"
          [nzValue]="item.id"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="openCreateClass()"
        class="md:!ml-2.5"
      >
        {{ $t('_addTag') }}
      </button>
      <button
        (click)="onBatchDelete()"
        nz-button
        nzDanger
        class="!ml-2.5"
        [disabled]="setOfCheckedId.size <= 0"
      >
        {{ $t('_batchDel') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="twoTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              class="min-w-[100px]"
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onCheckAll($event)"
            >
              ({{ setOfCheckedId.size }})
            </th>
            <th class="min-w-[200px]">{{ $t('_action') }}</th>
            <th class="min-w-[100px]">{{ $t('_icon') }}</th>
            <th class="min-w-[200px]">{{ $t('_tagName') }}</th>
            <th class="min-w-[100px]">{{ $t('_onlyOwnVisible') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of twoTableData; let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.id)"
              (nzCheckedChange)="onItemChecked(data.id, $event)"
            ></td>
            <td class="select-none">
              <a (click)="moveTwoUp(idx)" [class.invisible]="idx === 0">{{
                $t('_moveUp')
              }}</a>
              <a (click)="moveTwoDown(idx)" class="ml-2.5">{{
                $t('_moveDown')
              }}</a>
              <a (click)="openEditClass(data)" class="ml-2.5">{{
                $t('_edit')
              }}</a>
              <a (click)="openMoveWebModal(data, 2)" class="ml-2.5">{{
                $t('_move')
              }}</a>
            </td>
            <td>
              <app-logo [src]="data.icon" [name]="data.title" />
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgr3')">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        class="w-full md:w-[260px]"
      >
        <nz-option
          *ngFor="let item of navs()"
          [nzLabel]="item.title"
          [nzValue]="item.id"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel2')"
        (ngModelChange)="hanldeTwoSelect($event)"
        class="w-full md:w-[260px] !mb-2.5 !mt-2.5 md:!ml-2.5 md:!mt-0 md:!mb-0"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title"
          [nzValue]="item.id"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="openCreateClass()"
        class="md:!ml-2.5"
      >
        {{ $t('_addTag') }}
      </button>
      <button
        (click)="onBatchDelete()"
        nz-button
        nzDanger
        class="!ml-2.5"
        [disabled]="setOfCheckedId.size <= 0"
      >
        {{ $t('_batchDel') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="threeTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              class="min-w-[100px]"
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onCheckAll($event)"
            >
              ({{ setOfCheckedId.size }})
            </th>
            <th class="min-w-[200px]">{{ $t('_action') }}</th>
            <th class="min-w-[100px]">{{ $t('_icon') }}</th>
            <th class="min-w-[200px]">{{ $t('_tagName') }}</th>
            <th class="min-w-[100px]">{{ $t('_onlyOwnVisible') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of threeTableData; let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.id)"
              (nzCheckedChange)="onItemChecked(data.id, $event)"
            ></td>
            <td class="select-none">
              <a (click)="moveThreeUp(idx)" [class.invisible]="idx === 0">{{
                $t('_moveUp')
              }}</a>
              <a (click)="moveThreeDown(idx)" class="ml-2.5">{{
                $t('_moveDown')
              }}</a>
              <a (click)="openEditClass(data)" class="ml-2.5">{{
                $t('_edit')
              }}</a>
              <a (click)="openMoveWebModal(data, 3)" class="ml-2.5">{{
                $t('_move')
              }}</a>
            </td>
            <td>
              <app-logo [src]="data.icon" [name]="data.title" />
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgrWeb') + '(' + internal.loginViewCount + ')'">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        class="w-full !mb-2.5 md:w-[150px] md:!mb-0"
      >
        <nz-option
          *ngFor="let item of navs()"
          [nzLabel]="item.title"
          [nzValue]="item.id"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel2')"
        (ngModelChange)="hanldeTwoSelect($event)"
        class="w-full !mb-2.5 md:w-[150px] md:!mb-0 md:!ml-2.5"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title"
          [nzValue]="item.id"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="threeSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel3')"
        (ngModelChange)="hanldeThreeSelect($event)"
        class="w-full !mb-2.5 md:w-[150px] md:!mb-0 md:!ml-2.5"
      >
        <nz-option
          *ngFor="let item of threeTableData"
          [nzLabel]="item.title"
          [nzValue]="item.id"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="openCreateWebModal()"
        class="md:!ml-2.5"
      >
        {{ $t('_addWeb') }}({{ websiteTableData.length }})
      </button>
      <button
        (click)="onBatchDelete()"
        nz-button
        nzDanger
        [disabled]="setOfCheckedId.size <= 0"
        class="!ml-2.5"
      >
        {{ $t('_batchDel') }}
      </button>
      <button
        class="!ml-2.5"
        nz-button
        nzType="primary"
        nzDanger
        (click)="getErrorWebs()"
      >
        {{ $t('_getErrorWeb') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="websiteTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              class="min-w-[70px]"
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onCheckAll($event)"
            >
              ({{ setOfCheckedId.size }})
            </th>
            <th class="text-center min-w-[60px]">{{ $t('_action') }}</th>
            <th class="min-w-[70px]">{{ $t('_status') }}</th>
            <th class="min-w-[80px]">{{ $t('_icon') }}</th>
            <th class="min-w-[100px]">{{ $t('_webName') }}</th>
            <th class="min-w-[100px]">{{ $t('_associatedLabels') }}</th>
            <th class="min-w-[120px]">{{ $t('_onlyOwnVisible') }}</th>
            <th class="min-w-[300px]">{{ $t('_webDesc') }}</th>
            <th class="min-w-[300px]">{{ $t('_webTag') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of websiteTableData; let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.id)"
              (nzCheckedChange)="onItemChecked(data.id, $event)"
            ></td>
            <td class="text-center select-none">
              <div *ngIf="errorWebs.length <= 0">
                <a (click)="moveWebUp(idx)" [class.invisible]="idx === 0">{{
                  $t('_moveUp')
                }}</a>
              </div>
              <div *ngIf="errorWebs.length <= 0">
                <a (click)="moveWebDown(idx)">{{ $t('_moveDown') }}</a>
              </div>
              <a (click)="openEditWebModal(data)">{{ $t('_edit') }}</a>
              <div *ngIf="errorWebs.length <= 0">
                <a (click)="openMoveWebModal(data)">{{ $t('_move') }}</a>
              </div>
            </td>
            <td>
              <span
                *ngIf="data.ok === false"
                nz-icon
                nzType="close"
                nzTheme="outline"
                style="color: red"
              ></span>
            </td>
            <td>
              <app-logo
                *ngIf="data.icon"
                [src]="data.icon"
                [name]="data.name"
              />
            </td>
            <td>
              <a [href]="data.url" target="_blank">{{ data.name }}</a>
            </td>
            <td>
              <tag-list [data]="data.tags" *ngIf="data.tags" />
            </td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
            <td>
              <pre class="desc">{{ data.desc }}</pre>
            </td>
            <td>{{ data.breadcrumb }}</td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>
  </nz-tabset>
</div>
